<template>
  <div class="app-container">
    <!-- 流程设计器，负责绘制流程等 -->
    <my-process-designer :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm" ref="processDesigner" @init-finished="initModeler" @save="save" class="process-designer" />

    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
    <my-properties-panel-rule :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" :model="model" style="width: calc(100% - 75%)" @change-form="changeForm" />
  </div>
</template>

<script>
import { createTaskAssignRule, updateTaskAssignRule } from '@/api/bpm/taskAssignRule'
import translations from '@/components/bpmnProcessDesigner/src/translations'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
// import xmlObj2json from "./utils/xml2json";
import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette'
import { createModel, getModel, updateModel } from '@/api/bpm/model'
import MyPropertiesPanelRule from '@/components/bpmnProcessDesigner/package/penal/PropertiesPanelRule'
// 自定义侧边栏
// import MyProcessPanel from "../package/process-panel/ProcessPanel";

export default {
  name: 'App',
  components: { MyProcessPalette, MyPropertiesPanelRule },
  data() {
    return {
      formSub: [],
      xmlString: '', // BPMN XML
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
      translationsSelf: translations,
      controlForm: {
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: 'activiti',
        headerButtonSize: 'mini',
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
      },
      addis: {
        CustomContentPadProvider,
        CustomPaletteProvider
      },
      // 流程模型的信息
      model: {},
      modelId: ''
    }
  },
  created() {
    // 如果 modelId 非空，说明是修改流程模型
    const modelId = this.$route.query && this.$route.query.modelId
    this.modelId = modelId
    if (modelId) {
      getModel(modelId).then((response) => {
        this.xmlString = response.data.bpmnXml
        this.model = {
          ...response.data,
          bpmnXml: undefined // 清空 bpmnXml 属性
        }
        // this.controlForm.processId = response.data.key
      })
    }
  },
  methods: {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler
      }, 10)
    },
    reloadProcessDesigner(deep) {
      this.controlForm.additionalModel = []
      for (let key in this.addis) {
        if (this.addis[key]) {
          this.controlForm.additionalModel.push(this.addis[key])
        }
      }
      deep && (this.xmlString = undefined)
      this.reloadIndex += 1
      this.modeler = null // 避免 panel 异常
      // if (deep) {
      //   this.xmlString = undefined;
      //   this.$refs.processDesigner.processRestart();
      // }
    },
    changeForm(val) {
      this.formSub = val
    },
    save(bpmnXml) {
      // 构建表单

      this.formSub.forEach((row) => {
        let form = {
          ...row,
          taskDefinitionName: undefined
        }
        // 将 roleIds 等选项赋值到 options 中
        if (form.type === 10) {
          form.options = form.roleIds
        } else if (form.type === 20 || form.type === 21) {
          form.options = form.deptIds
        } else if (form.type === 22) {
          form.options = form.postIds
        } else if (form.type === 30) {
          form.options = form.userIds
        } else if (form.type === 50) {
          form.options = form.scripts
        }
        form.roleIds = undefined
        form.deptIds = undefined
        form.postIds = undefined
        form.userIds = undefined

        form.scripts = undefined

        // 新增
        if (!form.id) {
          form.modelId = this.modelId // 模型编号
          createTaskAssignRule(form).then((response) => {
            this.$modal.msgSuccess('修改成功')
          })
          // 修改
        } else {
          form.taskDefinitionKey = undefined // 无法修改
          updateTaskAssignRule(form).then((response) => {
            this.$modal.msgSuccess('修改成功')
          })
        }
      })
      this.close()
    },
    /** 关闭按钮 */
    close() {
      this.$tab.closeOpenPage({ path: '/activiti/manager' })
    }
  }
}
</script>

<style lang="scss">
//body {
//  overflow: hidden;
//  margin: 0;
//  box-sizing: border-box;
//}
//.app {
//  width: 100%;
//  height: 100%;
//  box-sizing: border-box;
//  display: inline-grid;
//  grid-template-columns: 100px auto max-content;
//}
.demo-control-bar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  .open-control-dialog {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 32px;
    background: rgba(64, 158, 255, 1);
    color: #ffffff;
    cursor: pointer;
  }
}

// TODO 芋艿：去掉多余的 faq
//.info-tip {
//  position: fixed;
//  top: 40px;
//  right: 500px;
//  z-index: 10;
//  color: #999999;
//}

.control-form {
  .el-radio {
    width: 100%;
    line-height: 32px;
  }
}
.element-overlays {
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
}

.my-process-designer {
  height: calc(100vh - 84px);
}
.process-panel__container {
  position: absolute;
  background: #ffffff;
  right: 0;
  top: 57px;

  box-shadow: none;

  height: calc(100vh - 84px);
}
.process-designer {
  width: calc(100% - 25%);
}
</style>
